<script setup>

import Comp1 from "./Comp1.vue";
import Comp2 from "./Comp2.vue";
import {markRaw, ref} from "vue";

let comp = ref(null)

// 注意事项：传入的参数名称不能和 原有的变量名一致，否则不能识别
function changeComponent(com) {
  comp.value = markRaw(com)
}
</script>

<template>
  <button v-on:click="changeComponent(Comp1)">Comp1</button>
  <button v-on:click="changeComponent(Comp2)">Comp2</button>
  <hr>

  <!--组件在切换的时候会进行动态的创建和销毁-->
  <component v-bind:is="comp"></component>
</template>

<style scoped>

</style>